<template>
	<view>
		<!-- 安全距离 -->
		<view style="height: var(--status-bar-height);"></view>
		<view class="flexdig">
			<view class="flexdig zuywe" >
				<view class="flexdig pgusue" @click="TabbarIndex = index" v-for="(item,index) in TabbarList"
					:key="item.id">
					<text :class="index == TabbarIndex?'zuisea':'fontse'">{{item.title}}</text>
				</view>
			</view>
		</view>
		<swiper @change="change" :current="TabbarIndex" :style="`height: calc(${emulator_Height}rpx - var(--status-bar-height);`"
			class="swiper">
			<swiper-item>
				<view class="flexdig justifyContentSpaceBetween bottomborder pagunes ayuywewa">
					<view class="flexdig">去中心化理财</view>
					<view class="flexdig">年化利率</view>
				</view>
				<view :style="`height: calc(${emulator_Height-46}rpx - var(--status-bar-height); ;`"
					class="element flexdig flexWrapWraps win92" style="padding-left: 40rpx;overflow-y: auto;">
					<view class="win100 flexdig pgysuew justifyContentSpaceBetween alignItemsCenter bottomborder">
						<view class="flexdig">
							<image src="/static/-1%20(1).png" style="width: 80rpx;height: 80rpx; margin-right: 40rpx;">
							</image>
							<view class="flexdig flexWrapWraps">
								<view>LON</view>
								<view class="foancolor" style="font-size: 24rpx;">存入LON,享流动性收益</view>
							</view>
						</view>
						<view class="flexdig">53.67%</view>
					</view>
					<view class="win100 flexdig pgysuew justifyContentSpaceBetween alignItemsCenter bottomborder">
						<view class="flexdig">
							<image src="/static/-1%20(2).png" style="width: 80rpx;height: 80rpx; margin-right: 40rpx;">
							</image>
							<view class="flexdig flexWrapWraps">
								<view>跨链资产网管</view>
								<view class="foancolor" style="font-size: 24rpx;">支持imBTC，WBTC</view>
							</view>
						</view>
						<view class="flexdig">1.23%</view>
					</view>
					<view class="win100 flexdig pgysuew justifyContentSpaceBetween alignItemsCenter bottomborder">
						<view class="flexdig">
							<image src="/static/-1%20(3).png" style="width: 80rpx;height: 80rpx; margin-right: 40rpx;">
							</image>
							<view class="flexdig flexWrapWraps">
								<view>ATMO 质押挖矿</view>
								<view class="foancolor" style="font-size: 24rpx;">质押挖矿</view>
							</view>
						</view>
						<view class="flexdig">9.74%</view>
					</view>
					<view class="win100 flexdig pgysuew justifyContentSpaceBetween alignItemsCenter bottomborder">
						<view class="flexdig">
							<image src="/static/-1%20(4).png" style="width: 80rpx;height: 80rpx; margin-right: 40rpx;">
							</image>
							<view class="flexdig flexWrapWraps">
								<view>Aave</view>
								<view class="foancolor" style="font-size: 24rpx;">存/借贷生息，支持17个币种</view>
							</view>
						</view>
						<view class="flexdig">8.49%</view>
					</view>
					<view class="win100 flexdig pgysuew justifyContentSpaceBetween alignItemsCenter bottomborder">
						<view class="flexdig">
							<image src="/static/-1%20(5).png" style="width: 80rpx;height: 80rpx; margin-right: 40rpx;">
							</image>
							<view class="flexdig flexWrapWraps">
								<view>Compound</view>
								<view class="foancolor" style="font-size: 24rpx;">存币生息，支持USDT/USDC/Dai等</view>
							</view>
						</view>
						<view class="flexdig">1.94%</view>
					</view>
					<view class="win100 flexdig pgysuew justifyContentSpaceBetween alignItemsCenter bottomborder">
						<view class="flexdig">
							<image src="/static/-1%20(6).png" style="width: 80rpx;height: 80rpx; margin-right: 40rpx;">
							</image>
							<view class="flexdig flexWrapWraps">
								<view>dydx</view>
								<view class="foancolor" style="font-size: 24rpx;">去中心化的借贷和永续合约交易</view>
							</view>
						</view>
						<view class="flexdig">1.90%</view>
					</view>
				</view>
			</swiper-item>
			<swiper-item class="element" :style="`overflow-y: auto;height: calc(${emulator_Height}rpx - var(--status-bar-height); padding-bottom: 20rpx;`">
				<view class="flexdig flexWrapWraps">
					<view class="flexdig auyuaa win94auto" style="margin-top: 5px;margin-bottom5px;margin-left: auto;margin-right: calc();">
						<text class="foancolor" style="font-size: 25rpx;">24H量￥99.24M</text>
						<text class="foancolor" style="font-size: 25rpx;margin-left: 20px;">最新兑换2.50K CHZ →612.21USDT</text>
					</view>
					<view class="flexdig win94auto ">
						<view  class="syzuysea win100">
							<view class="flexdig flexWrapWraps" style="padding: 0 20rpx;">
								<view class="flexdig justifyContentSpaceBetween win100" style="height:60px; 20rpx 0rpx;border-bottom: 1px solid #e7e7e7;">
										<view class="flexdig alignItemsCenter">
											<image :src="letfmap.image" style="width: 50rpx; height: 50rpx;margin-right: 10rpx;"></image>
											<text style="margin-right: 10rpx;font-size: 12px;">{{letfmap.title}}</text>
											<image src="/static/xiala.png" style="width: 30rpx; height: 30rpx;" />
										</view>
										<view class="flexdig alignItemsCenter">
											<image :src="rmap.image" style="width: 50rpx; height: 50rpx;margin-right: 10rpx"></image>
											<text style="margin-right: 10rpx;font-size: 12px;">{{rmap.title}}</text>
											<image src="/static/xiala.png" style="width: 30rpx; height: 30rpx;" />
										</view>
									</view>
									<image @click="zhuanhu" class="suaiyewqwe" src="/static/exchangeAction.png"></image>
									<view class="flexdig" style="padding-bottom: 12rpx; border-bottom: 1px solid #e7e7e7;">
										<input placeholder="请输入数量" />
										<input placeholder="收到数量" :disabled="true" dir="rtl" />
									</view>
									<view style="">
										<view style="padding-bottom: 6rpx;padding-top: 10rpx;">
											<text style="font-size: 24rpx;">{{ttttt}}</text>
										</view>
										<view style="padding-bottom: 12rpx;">
											<text style="font-size: 24rpx;">手续费: 0.3%</text>
										</view>
									</view>
									<view class="flexdig win100 justifyContentSpaceBetween" style="margin-top: 10px;">
										<view class="flexdig" style="padding: 5rpx; border: 1px solid #efefef; border-radius: 20rpx;">
											<image src="/static/img14.png" style="width: 80rpx;height: 80rpx;"></image>
										</view>
										<view  class="flexdig justifyContentcenter alignItemsCenter asyuweqeq">
											<text class="flexdig">闪电兑换</text>
										</view>
									</view>
								</view>
								<image src="/static/exchangeBottomImage.png" style="width: 100%;height: 86rpx;position: relative;bottom: -12rpx;margin-top: 15px;"/>
							</view>
					</view>
					<view class="flexdig win100 " style="position: fixed;bottom: 0;right: 0;">
						<view  class="syzuysea win100">
							<view class="flexdig flexWrapWraps" >
								
								<!-- <image src="/static/1.png" ></image> -->
								<image src="/static/exchangeAd.png" mode="widthFix" style="width: 100%;"></image>
							</view>
						</view>
					</view>
				</view>
				<view style="height: 30rpx;"></view>
			</swiper-item>
			<swiper-item>
				<view>
					
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				TabbarIndex: 1,
				TabbarList: [{
						id: 0,
						title: '理财'
					},
					{
						id: 1,
						title: '交易'
					},
					{
						id: 3,
						title: '行情'
					}
				],
				emulator_Height: 0,
				letfmap:{
					title: 'ETH',
					image: '/static/ETCIcon.png',
				},
				rmap: {
					title: 'USDT',
					image: '/static/usdtIcon.png'
				},
				ttttt:'汇率:ETH = 3033.44442 USDT',
				huilv1:'汇率:ETH = 3033.44442 USDT',
				huilv2:'汇率:USDT = 0.00032924 ETH',
				isETH:true,
			}
		},
		onReady() {
			let that = this;
			uni.getSystemInfo({
				success: function(res) {
					console.log(res)
					let emulator_Height = res.windowHeight * (750 / res.screenWidth) || 0; //将px 转换rpx
					console.log("rpx*********", emulator_Height)
					that.emulator_Height = emulator_Height - 64
				}
			});
		},
		methods: {
			change(e){
				this.TabbarIndex = e.detail.current;
			},
			duihuan(){
				plus.nativeUI.toast("<font style=\"font-size:14px;color:#000;\">imToken: 链接失败</font>",
						{type:'richtext',
							duration:'long',
							background: '#e5e5e5',
							richTextStyle:{
								align:'center',
							}
						});
			},
			zhuanhu(){
				let rmap = this.rmap
				let lmap = this.letfmap
				this.rmap = lmap
				this.letfmap = rmap
				this.isETH = !this.isETH
				if(this.isETH){
					this.ttttt = this.huilv1
				}else{
					this.ttttt = this.huilv2
				}
			}
		}
	}
</script>

<style>
	.zuihshuqwe{
		font-size: 15px;
		    color: #afafaf;
	}
	.zuiuyweqaja{
		    width: 8px;
		    height: 8px;
		    background: #4697e4;
		    border-radius: 50%;
		    margin-right: 12px;
	}
	.asyuweqeq{
		    width: 80%;
		    background: #007afc;
		    color: #fff;
		    border-radius: 8px;
	}
	.suaiyewqwe{
		width: 39px;
		    height: 40px;
		    position: relative;
		    top: -22px;
		    left: 42%;
		    /* right: auto; */
		    /* margin: auto; */
		    display: flex;
	}
	.element::-webkit-scrollbar {
		display: none
	}
	.syzuysea{
		/* padding: 20rpx; */
		box-shadow: 0px 0px 20px 0px rgb(0 0 0 / 7%), 0 2px 3px 0 rgb(0 0 0 / 10%);
		border-radius: 28rpx;
		margin-top: 7px;
	}
	.ayuywewa {
		margin-top: 5px;
		height: 46rpx;
		align-items: center;
	}

	.pgysuew {
		width: 100%;
		padding: 30rpx 0;
		padding-right: 20rpx;
	}

	.flexWrapWraps {
		flex-direction: column;
	}

	.flexdig {
		display: flex;
	}

	.pagunes {
		padding: 10rpx 20rpx;
	}

	.zuywe {
		width: 100%;
		align-items: center;
		height: 64rpx;
		border-bottom: 1px solid #efefef;
		justify-content: center;
	}

	.auyuaa {
		align-items: center;
		height: 64rpx;
		border: 1px solid #efefef;
		justify-content: center;

		margin-top: 10px;
		border-radius: 7px;
	}

	.win94auto {
		margin: auto;
		width: 94%;
	}

	.win92 {
		width: 92%;
	}
	.win100{
		width: 100%;
	}
	.bottomborder {
		border-bottom: 1px solid #efefef;
	}

	.foancolor {
		color: #6b6b6b;
	}

	.fontse {
		color: #afafaf;
	}

	.pgusue {
		width: 20%;
		justify-content: center;
	}

	.zuisea {
		margin: 20px;
		padding-bottom: 8px;
		border-bottom: 2px solid;
	}

	.justifyContentSpaceBetween {
		justify-content: space-between;
	}

	.alignItemsCenter {
		align-items: center;
	}

	.flexWrapWrap {
		flex-wrap: wrap;
	}
	.justifyContentcenter{
		justify-content: center;
	}
</style>
